<template>
	<div>
		<el-card class="mb-4" shadow="never">
			<div class="text-xl font-medium mb-[20px]">默认</div>
			<datePicker v-model:dateTime="state.value" />
		</el-card>
		<el-card class="mb-4" shadow="never">
			<div class="text-xl font-medium mb-[20px]">自定义</div>
			<datePicker v-model:dateTime="state.value2" :shortcuts="state.config.shortcuts"
				:isPickerOptions="state.config.isPickerOptions" />
		</el-card>
	</div>
</template>

<script setup lang="ts" name="compDatePicker">
import { reactive } from 'vue';

const state = reactive({
	value: '',
	value2: '',
	config: {
		shortcuts: [
			{
				text: 'Today',
				value: new Date(),
			},
			{
				text: 'Yesterday',
				value: () => {
					const date = new Date();
					date.setTime(date.getTime() - 3600 * 1000 * 24);
					return date;
				},
			},
			{
				text: 'A week ago',
				value: () => {
					const date = new Date();
					date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
					return date;
				},
			},
		],
		isPickerOptions: false,
	},
});

</script>

<style scoped lang="scss"></style>
